import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    Dimensions,
    ScrollView, StatusBar, TextInput, Modal, RefreshControl, FlatList, ActivityIndicator
} from 'react-native';
import { WebView } from 'react-native-webview'
// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window');
import Styles from './Styles';
import app from '../../../app.json';
import Ugame from '../../../Ugame';
import Httpc from "../../utils/Httpc";
import REQUEST from "../../../REQUEST";
import Utils from "../../utils/Utils";
export default class UserDetailed extends Component {
    constructor(props) {
        super(props);
        this.state = {
            toastModelVisible: false,
            message: '',
            days: 7,
            deatiled: null,
            page: 0,
            rows: 10,
            total: 0,
            totalpage: 1,
            lists: [],
            refreshing: false,
        };
        this.user = null;
        this.getServerData = this.getServerData.bind(this);
    }
    static navigationOptions = {
        title: '',
        //header: null,  //隐藏顶部导航栏
        //tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: 'transparent',
            paddingTop: 18
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            //fontWeight: 'bold',
        },
    }
    componentDidMount() {
        const { navigation } = this.props;
        this.user = navigation.getParam("user");
        console.log(this.user);
        this.getServerData();
    }
    getServerData = () => {
        this._getUserGodsDetail();
        this._getUserGodsList();
    }
    _getUserGodsDetail = () => {
        let params = {};
        params.token = Ugame.info.Token;
        params.days = this.state.days;
        params.userid = this.user.userid;
        Httpc.get(REQUEST.GetUserGodsDetail, params, (res) => {
            console.log(res);
            if (res.StatusCode == 1) {
                this.setState({
                    deatiled: res.Data
                })
            }
        });
    }
    _getUserGodsList = () => {
        let { page, rows, lists } = this.state;
        let Gparams = {
            userid: this.user.userid,
            page: this.state.page + 1,
            rows: 10,
        }
        Httpc.get(REQUEST.GetUserGodsList, Gparams, (res) => {
            console.log(res);
            if (res.StatusCode == 1) {
                if (res.Data.length > 0) {
                    this.setState({
                        page: page + 1,
                        rows: rows,
                        total: res.total,
                        totalpage: res.totalpage,
                        lists: lists.concat(res.Data),
                    })
                }
            }
        });
    }
    _on_FollowDetailed = (item) => {
        if (Ugame.isLogin()) {
            this.props.navigation.navigate('FollowDetailed', {
                GameId: item.GameId,
                id: item.id,
                isFollow: item.State == 1 && item.GameIn == 1 ? 1 : 0,//1可以跟单0不可以
            });
        } else {
            this.props.navigation.navigate('Login');
        }

    }
    _on_FollowConcern = () => {
        let { deatiled } = this.state;
        let url = null;
        if (deatiled.IsFrind == 1) {
            url = REQUEST.DelFollowConcern;
        } else {
            url = REQUEST.AddFollowConcern;
        }
        let params = {
            token: Ugame.info.Token,
            userid: this.user.userid
        }
        Httpc.get(url, params, (res) => {
            this.do_toast(res.Message, 500, () => {
            });
            if (res.StatusCode == 1) {
                deatiled.IsFrind = deatiled.IsFrind == 1 ? 0 : 1;
                this.setState({
                    deatiled: deatiled
                })
            }
        });

    }
    _onRefresh = () => {
        if (this.state.refreshing) {
            return;
        }
        this.setState({ refreshing: true });
        let _this = this;
        let params = {};
        let { page, rows } = this.state;
        params.page = 1;
        params.rows = rows;
        params.userid = this.user.userid;
        Httpc.get(REQUEST.GetUserGodsList, params, function (res) {
            _this.setState({
                page: 1,
                rows: rows,
                total: res.total,
                totalpage: res.totalpage,
                lists: res.Data,
            });
            _this.setState({ refreshing: false });
        })
    }
    _createNewsItem = ({ item, index }) => {
        let PicAddr = Ugame.gmlist[item.GameId].PicAddr;
        //State 0审核中 4撤销  等于 2 代表输 等于 3 代表赢 如果是1 的时候  就显示跟单 但是要判断GameIn 如果 GameIn 是1 的时候 就不能是跟单 应该是 正在开奖中 或者 其他 因为 他们要提前15分钟是不能投注的  所以你要判断GameIn
        return (
            <View style={Styles.recommend_lists}>
                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: width - 24, marginLeft: 0, paddingTop: 12 }}>
                    <Image resizeMode="cover" style={{ width: 22, height: 22, borderRadius: 22 }} source={{ uri: PicAddr }} />
                    <Text style={{ color: '#333333', marginLeft: 5 }}>{item.Gamename}</Text>
                    <View style={{ position: 'absolute', right: 0, alignItems: 'center' }}>
                        <Text style={{ fontSize: 12, color: '#666666' }}>{!!item.endtime ? item.endtime.slice(0, 16) : null} 截止</Text>
                    </View>
                </View>
                <TouchableOpacity onPress={() => this._on_FollowDetailed(item)}>
                    <Text style={{ color: '#999999', lineHeight: 20, marginTop: 10, marginBottom: 10, marginLeft: 12, width: width - 24, textAlign: 'left' }}>{item.Metro}</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this._on_FollowDetailed(item)}>
                    <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: width, height: 55, borderTopWidth: 0.5, borderTopColor: '#f2f2f2' }}>
                        <View style={{ width: (width - 72) / 4, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                            <Text style={{ color: '#333333' }}>{item.OrderCoin}</Text>
                            <Text style={{ color: '#999999' }}>订单总额</Text>
                        </View>
                        <View style={{ width: (width - 72) / 4, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                            <Text style={{ color: '#333333' }}>{item.SelfCoin}</Text>
                            <Text style={{ color: '#999999' }}>自购金额</Text>
                        </View>
                        <View style={{ width: (width - 72) / 4, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                            <Text style={{ color: '#333333' }}>{item.SingleCoin}</Text>
                            <Text style={{ color: '#999999' }}>单倍金额</Text>
                        </View>
                        <View style={{ width: (width - 72) / 4, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                            <Text style={{ color: '#333333' }}>{item.FollowNum}</Text>
                            <Text style={{ color: '#999999' }}>跟单人数</Text>
                        </View>
                        {item.State == 0 ?
                            <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', marginTop: -10 }}>
                                <Image resizeMode="cover" style={{ width: 40, height: 40, borderRadius: 40 }} source={require('../../image/js_img_icon_win_new.png')} />
                                <Text style={{ fontSize: 10, color: '#d0162e', marginTop: -28, transform: [{ rotate: '-13deg' }] }}>审核中</Text>
                            </View> :
                            null
                        }
                        {item.State == 1 && item.GameIn == 1 ?
                            <Text style={{ width: 72, backgroundColor: '#d0162e', height: 55, textAlign: 'center', color: '#ffffff', lineHeight: 55 }}>参与跟单</Text> :
                            null
                        }
                        {item.State == 1 && item.GameIn != 1 ?
                            <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', marginTop: -10 }}>
                                <Image resizeMode="cover" style={{ width: 40, height: 40, borderRadius: 40 }} source={require('../../image/js_img_icon_win_new.png')} />
                                <Text style={{ fontSize: 10, color: '#d0162e', marginTop: -28, transform: [{ rotate: '-13deg' }] }}>开奖中</Text>
                            </View> :
                            null
                        }
                        {item.State == 2 ?
                            <Image resizeMode="cover" style={{ width: 40, height: 40, borderRadius: 40 }} source={require('../../image/js_img_icon_lose.png')} /> :
                            null
                        }
                        {item.State == 3 ?
                            <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                                <Image resizeMode="cover" style={{ width: 40, height: 40, borderRadius: 40 }} source={require('../../image/js_img_icon_win_new.png')} />
                                <Text style={{ fontSize: 10, color: '#d0162e', marginTop: -28, transform: [{ rotate: '-13deg' }] }}>{item.GainCoin}元</Text>
                            </View> :
                            null
                        }
                        {item.State == 4 ?
                            <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', marginTop: -10 }}>
                                <Image resizeMode="cover" style={{ width: 40, height: 40, borderRadius: 40 }} source={require('../../image/js_img_icon_win_new.png')} />
                                <Text style={{ fontSize: 10, color: '#d0162e', marginTop: -28, transform: [{ rotate: '-13deg' }] }}>撤单</Text>
                            </View> :
                            null
                        }
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
    _onEndReached() {
        this._getUserGodsList();
    }
    _on_change_days = (days) => {
        this.setState({
            days: days
        }, () => {
            this._getUserGodsDetail();
        });
    }
    renderLoadingView() {
        return (
            <View style={Styles.container}>
                <StatusBar translucent={true} backgroundColor="transparent" />
                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', backgroundColor: '#d0162e', width: width, marginTop: -60, paddingTop: 60, paddingBottom: 15 }}>
                </View>
                <View style={{
                    flex: 1, justifyContent: 'center', flexDirection: 'row',
                    justifyContent: 'space-around',
                    padding: 10
                }}>
                    <ActivityIndicator size="large" color="#d0162e" />
                </View>

            </View>
        );
    }
    render() {
        let { deatiled, lists, days } = this.state;
        let user = this.user;
        if (deatiled == null || user == null) {
            return this.renderLoadingView();
        }
        return (
            <View style={Styles.container}>
                <StatusBar translucent={true} backgroundColor="transparent" />
                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', backgroundColor: '#d0162e', width: width, marginTop: -60, paddingTop: 60, paddingBottom: 15 }}>
                    <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }}>
                        <Image resizeMode="cover" style={{ width: 44, height: 44, borderRadius: 44, borderColor: '#ffffff', borderWidth: 2, marginLeft: 12 }} source={user.head_img} />
                        <TouchableOpacity onPress={() => this._on_newsDeatiled(item)}>
                            <View style={{ marginLeft: 8 }}>
                                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }}>
                                    <Text style={{ color: '#ffffff' }}>{user.nick}</Text>
                                </View>
                                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }}>
                                    <Text style={{ fontSize: 12, color: '#ffffff' }}>粉丝:</Text>
                                    <Text style={{ fontSize: 12, color: '#ffffff' }}>{deatiled.e}</Text>
                                </View>
                            </View>
                        </TouchableOpacity>
                    </View>
                    <View style={{ marginRight: 12 }}>
                        <TouchableOpacity onPress={() => this._on_FollowConcern()}>
                            {deatiled.IsFrind == 0 ?
                                <Text style={Styles.guanzhu}>+ 关注</Text> :
                                <Text style={Styles.guanzhu}>已关注</Text>
                            }
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={{ backgroundColor: '#ffffff', width: width, height: 105, overflow: 'hidden' }}>
                    <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffffff', paddingTop: 10, paddingBottom: 10 }}>
                        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderRadius: 20, width: 120, height: 20, borderColor: '#cccccc', borderWidth: 0.5 }}>
                            <TouchableOpacity onPress={() => this._on_change_days(7)}>
                                <Text style={days == 7 ? Styles.days_on : Styles.days}>7天</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this._on_change_days(30)}>
                                <Text style={days == 30 ? Styles.days_on : Styles.days}>30天</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={{ flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', paddingTop: 10, paddingBottom: 10 }}>
                        <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: (width - 24) / 4 }}>
                            <Text style={{ color: '#d0162e' }}>{deatiled.d}</Text>
                            <Text style={{ fontSize: 12, color: '#999999' }}>发单数</Text>
                        </View>
                        <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: (width - 24) / 4 }}>
                            <Text style={{ color: '#d0162e' }}>{deatiled.a}%</Text>
                            <Text style={{ fontSize: 12, color: '#999999' }}>命中率</Text>
                        </View>
                        {/* <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: (width - 24) / 4 }}>
                            <Text style={{ color: '#d0162e' }}>{deatiled.b}%</Text>
                            <Text style={{ fontSize: 12, color: '#999999' }}>盈利率</Text>
                        </View> */}
                        <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: (width - 24) / 4 }}>
                            <Text style={{ color: '#d0162e' }}>{deatiled.c}%</Text>
                            <Text style={{ fontSize: 12, color: '#999999' }}>带红人数</Text>
                        </View>
                    </View>
                </View>
                <FlatList
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this._onRefresh}
                        />
                    }
                    data={lists}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={this._createNewsItem}
                    onEndReached={this._onEndReached.bind(this)}
                    onEndReachedThreshold={10}
                    ItemSeparatorComponent={this._separator}
                />
                {this.toast()}
            </View>
        );
    }
    do_toast = (str, time, func) => {
        this.setState({
            message: str,
            toastModelVisible: true
        });
        setTimeout(() => {
            this.setState({
                message: '',
                toastModelVisible: false
            });
            func();
        }, time);
    }
    toast = () => {
        return (
            <Modal
                animationType="fade"
                transparent={true}
                visible={this.state.toastModelVisible}
                onRequestClose={() => {
                    this.setState({
                        toastModelVisible: false
                    });
                }}
            >
                <View style={{ flexDirection: 'row', justifyContent: 'center', position: 'absolute', bottom: 100, width: width }}>
                    <Text style={{ backgroundColor: 'rgba(0,0,0,0.7)', color: '#ffffff', borderRadius: 10, height: 40, lineHeight: 40, paddingLeft: 20, paddingRight: 20 }}>{this.state.message}</Text>
                </View>
            </Modal>
        );
    }
}
